<template>
	<div class="handle-img">
		<h2>单张图片上传</h2>
		<section class="up-img-box">
			<img :src="src" class="preview" />
			<el-button type="primary" round @click="triggerUpImg">选择图片</el-button>

			<input type="file" accept="image/*" ref="upImg" @change="fileChange" class="up-img" />
		</section>
		<h2>图片预览</h2>
		<section>
			<viewer :images="images" @inited="inited" ref="viewer">
				<img v-for="src in images" :key="src" :src="src" class="viewer-img" />
			</viewer>
			<el-button type="primary" round @click="showPreview">预览</el-button>
		</section>
		<h2>图片剪裁</h2>
		<div class="tip">需要单张图片上传选择图片后剪裁</div>
		<section class="up-img-box">
			<img :src="afterSrc" v-if="afterSrc" />
			<el-button type="primary" round @click="startCut">开始剪裁</el-button>
		</section>
		<div class="cut-box" v-show="showCut">
			<img :src="src" class="preview" ref="cutImage" />
			<el-button type="primary" round @click="saveCut" class="check-cut">确认剪裁</el-button>
		</div>
	</div>
</template>

<script>
import { imgToBase64, dataURLtoFile } from '@/utils/handleImg.js';
// 图片
import addImg from '@/assets/images/add.png';
// 剪裁
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
	name: 'handle-img',
	components: {},
	data: () => ({
		cropper: '', // 剪裁示例
		imgName: '', // 选择图片名称
		showCut: false, // 显示剪裁
		afterSrc: '', // 剪裁后图片
		src: '',
		images: [
			require('@/assets/images/p1.jpeg'),
			require('@/assets/images/p2.jpeg'),
			require('@/assets/images/p3.jpeg'),
		],
	}),
	computed: {},
	mounted() {
		document.title = '图片上传示例';
		this.src = addImg;
		this.initCut(); // 图片剪裁初始化
	},
	methods: {
		//图片剪裁
		initCut() {
			this.cropper = new Cropper(this.$refs.cutImage, {
				viewMode: 2,
				dragMode: 'none',
				initialAspectRatio: 1,
				aspectRatio: 1,
				preview: '.before',
				background: false,
				autoCropArea: 1,
				zoomOnWheel: false,
			});
		},
		// 确认剪裁
		saveCut() {
			const afterImg = this.cropper
				.getCroppedCanvas({ imageSmoothingQuality: 'low', width: '150', height: '150' })
				.toDataURL('image/jpeg');

			const params = new FormData();
			params.append('file', dataURLtoFile(afterImg, this.imgName));
			// ajax
			console.log(params);

			this.showCut = false;
			this.afterSrc = afterImg;
		},
		// 开始剪裁
		startCut() {
			this.showCut = true;
			this.cropper.replace(this.src);
		},
		// 图片预览初始化
		inited(viewer) {
			this.$viewer = viewer;
			this.$viewer.index = 0;
			// 移除底部缩略图
			this.$viewer.options.navbar = false;
		},
		showPreview() {
			this.$viewer.show();
		},
		triggerUpImg() {
			this.$refs['upImg'].click();
		},
		// 读取选择图片信息
		async fileChange(e) {
			const files = await imgToBase64(e.target.files[0]);
			this.src = files.content;
			this.imgName = files.file.name;
			console.log(files);
		},
	},
};
</script>

<style scoped lang="scss">
.up-img-box {
	display: flex;
	align-items: center;

	.preview {
		width: 150px;
		height: 150px;
		margin-right: 20px;
		border: 1px solid #ccc;
	}
	.up-img {
		display: none;
	}
}

.viewer-img {
	width: 300px;
}
.tip {
	font-size: 14px;
	color: red;
}
.cut-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}
.check-cut {
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 9999;
}
</style>
